《本篇文章同步發表在我瘋官方粉絲團&我瘋官方網站》

Nextend Social Login 是什麼 ?

• 一款容易操作且免費的 plugin
• 節省使用者寶貴的時間去填寫會員註冊資料
• 以 Facebook、Google、Twitter 等多種社群帳號快速登入

你會需要先瞭解 OAuth2.0

開放授權（OAuth）是一個開放標準，允許用戶讓第三方應用存取該用戶在某一網站上儲存的私密的資源（如相片，影片，聯絡人列表），而無需將用戶名稱和密碼提供給第三方應用。

若想瞭解 Google OAuth2.0，此為參考資料。

當我們要使用個人網站 ( 我瘋網站 ) 存取 Google API 時

1. 須獲得使用者的同意授權，Google Server 會回傳授權碼給我瘋網站
2. 我瘋網站將授權碼、申請的憑證與 Google Server 交換存取憑證（Token）
3. 我瘋網站用存取憑證（Token）向 Google API 存取經過使用者授權的資訊 ( 姓名、Email、大頭照等資訊 )

由於此外掛已實作驗證方式，因此我們僅須操作以下項目 :

1. 設定 OAuth 同意畫面
2. 向 Google 申請一組用戶端憑證
3. 將用戶端憑證 ID、Secret 填寫至 Nextend Social Login 外掛當中

安裝及設定方式

1. 搜尋並安裝此外掛 Nextend Social Login and Register

2. 下載完畢後，即看到所有可串接的登入方式，本篇以 Google 登入為例，點選「Getting Strated」

進入後，會發現已提供相當完整的操作流程及影片，若懶得看那就跟著我瘋一起完成吧:D

3. 連結至 GoogleAPIs ， 登入後並「新增專案」，填寫【專案名稱】，點選「建立」

4. 新增完成後，至 「OAuth 同意畫面」，選擇「外部」，並「建立」

5. 輸入【應用程式名稱】以及【已授權網域】，填寫完成後並「儲存」

設定OAuth同意畫面是因為網域必須被設定到授權網域清單，才可以使用該憑證。

注意 : 網域需填寫頂級網域 !
舉例 : 本篇測試網址為子網域 blog.wowfuncode.com，頂級網域則為 wowfuncode.com。

6. 點選側欄「憑證」>「建立憑證」>「OAuth 用戶端 ID」

** 此 OAuth用戶端ID 憑證，主要是為了讓 Google 識別我瘋網站，以便取得 Token。**

7. 填寫【應用程式類型】為「網頁應用程式」，以及填寫「已授權的重新導向 URI」

[已授權的重新導向 URI ] 是當使用者確定登入授權後，Google 會將用於取得 Token 的資料(授權碼、用戶端憑證) 附帶在 URL 的後面，接著將資料丟給後端程式去跟 Google 換取授權資料的 Token

• 至 WordPress 後台，複製 URI 並貼上

8. 成功後，複製產生出來的用戶端 ID 及 密碼

9. 至 WordPress 後台點選 「I am done setting up my Google App」，並貼上剛剛複製的 ID 及密碼，儲存設定

10. 儲存後，點選 Verify Settings 進行驗證，驗證成功則會顯示「The test was successful!」，並點選「Enable」

11. 最後一步，到自己的登入頁面測試 Google 登入是否成功啦 !

《精采文章同步發表》
1.我瘋FB粉絲專頁：https://www.facebook.com/我瘋程式工作室wowfuncode-102683961458110/
2.我瘋官網：https://www.wowfuncode.com/category/blog/